import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, Row, Col, ListGroupItem } from 'react-bootstrap';
import moment from 'moment';
import axios from 'axios';
import DatePicker from '../../components/date/react-datepicker';

import AccordionPanels from '../../components/panel/AccordionPanels';
// import PanelList from '../../components/panel/PanelList';

import './home.less';

/*function getNotices(startDate) {
  const notices = [];
  for (let i = 0; i < 10; i += 1) {
    notices.push({
      key: i + 1,
      text: `${startDate.format('YYYY-MM-DD')}：杭州市信息中心电力维护，届时从21号早上8点至8:30，断电30分钟，请点击查看详情确认接收信息！`,
    });
  }
  return notices;
}

function getWarns(startDate) {
  const warns = [];
  for (let i = 0; i < 10; i += 1) {
    warns.push({
      key: i + 1,
      text: `${startDate.format('YYYY-MM-DD')}：最近48小时，传染病靠卡服务调用异常次数234次，请重点关注！`,
    });
  }
  return warns;
}*/


class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      notices: [],
      warns: [],
      startDate: moment(),
    };
    this.getNotices(moment());
    this.getWarns(moment());
    this.handleChange = this.handleChange.bind(this);
  }

  getNotices(date) {
    axios.get('/api/testjson/notices', {
      params: {
        startDate: date.format('YYYY-MM-DD'),
      },
    }).then((res) => {
      this.setState({
        notices: res.data.data,
      });
    });
  }

  getWarns(date) {
    axios.get('/api/testjson/warns', {
      params: {
        startDate: date.format('YYYY-MM-DD'),
      },
    }).then((res) => {
      this.setState({
        warns: res.data.data,
      });
    });
  }

  handleChange(date) {
    this.setState({
      startDate: date,
    });
    this.getNotices(date);
    this.getWarns(date);
  }

  render() {
    const { notices, warns } = this.state;
    const panels = [{
      title: '重要通知',
      list: notices.map(e => (
        <ListGroupItem key={e.key}>{e.text}</ListGroupItem>
      )),
    }, {
      title: '异常提醒',
      list: warns.map(e => (
        <ListGroupItem key={e.key}>{e.text}</ListGroupItem>
      )),
    }];

    return (
      <Grid>
        <Row className="show-grid">
          <Col xs={12} sm={10} md={8} lg={6}>
            <AccordionPanels panels={panels} />
          </Col>
          <Col xs={12} sm={2} md={4} lg={6}>
            <DatePicker
              inline
              selected={this.state.startDate}
              onChange={this.handleChange}
              dropdownMode="scroll"
            />
          </Col>
        </Row>
      </Grid>
    );
  }
}

ReactDOM.render(
  <Home />,
  document.getElementById('app'),
);

